<template>
	<view class="article">
		<view class="box">
			<image :src="firstLis.image" />
			<h2>{{firstLis.title}}</h2>
			<p>{{firstLis.body}}</p>

			<view v-for="(item,index) in secondLis" :key="index">
				<p>{{item.content}}</p>
				<image :src="item.image.url" />
			</view>
		</view>

		<view class="more-page">
			<view style="display: flex;justify-content: space-between;">
				<h2>__猜你喜欢__</h2>
				<view class="refresh" @click="refreshLis">
					<text>刷新</text>
				</view>
			</view>

			<view v-for="(item,index) in moreLis" :key="index" class="page-title" @click="toArticle(item.objectId)">
				<view>
					<image :src="item.topImage.url" />
				</view>

				<view style="margin-left: 2vw;">
					<p>{{item.title}}</p>
					<text>{{item.body}}</text>
				</view>
			</view>
		</view>

		<h2 style="font-size: 18px;font-weight: 700;margin-top: 20px;margin-left: 5vw;">评论</h2>
		<view class="wup" v-if="commentLis.length < 1">
			暂无评论
		</view>
		<view v-for="(item,index) in commentLis" :key="index" class="comment">
			<image :src="item.comment.userInfo.user_icon" />
			<view class="comment-text">
				<p style="font-size: 15px;font-weight: bold;">{{item.comment.userInfo.name}}</p>
				<p style="color: #969696;font-size: 12px;">{{item.comment.createdAt}}</p>
				<p>{{item.comment.content}}</p>
				<text style="font-size: 14px;color: #ccc;font-weight: bold;"
					v-if="item.subComments.length >= 1">Ta的回复:</text>
				<view v-for="(tar,index) in item.subComments" :key="index" class="target">
					<image :src="tar.targetUserInfo.user_icon" />
					<view style="margin-left: 10px;">
						<p style="font-size: 12px;font-weight: bold;">{{tar.targetUserInfo.name}}</p>
						<p style="font-size: 11px;">{{tar.content}}</p>
					</view>

				</view>

			</view>
		
		</view>

		<view class="foot">
			<p>一滴都没啦，快去宠幸别的冷知识吧┗( T﹏T )┛</p>
		</view>

		<view class="setLike">
			<view @click="changeLike" style="margin-left: 10px;">
				<p style="font-size: 20px;text-align: center;">☆</p>
				<p style="font-size: 13px;">收藏</p>
			</view>
			<view class="set-comment">
				<input type="text" placeholder="留下你想说的话吧!" v-model="comstr">
				<button @click="addComment">发送</button>
			</view>
		</view>

	</view>
</template>

<script>
	import getDateTime from './getdateTime.js';
	export default {
		data() {
			return {
				id: '',
				firstLis: {},
				secondLis: [],
				moreLis: [],
				moreId: [],
				randouNum: 0,
				isHas: false,
				commentLis: [],
				comstr: "",
				nowTime: '',
			}
		},

		methods: {
			onLoad(options) {
				this.id = options.id;
				this.getData()
			},
			getData() {
				uni.request({
					url: `http://cloud.agopage.com/6b83fd3bc06260ec/agopageDetail?agopageId=${this.id}`,
					success: ({
						data
					}) => {

						this.firstLis = data.agopage;
						this.secondLis = data.agopageSub;
						this.commentLis = data.comment

						for (var i = 0; i < 3; i++) {
							this.randouNum = Math.floor(Math.random() * data.morePage.length)

							this.isHas = false;
							for (var j = 0; j < this.moreId.length; j++) {
								if (this.moreId[j] == this.randouNum) {
									i--;
									this.isHas = true;
									break;
								}
							}
							if (this.isHas == false) {
								this.moreId.push(this.randouNum)
							}
						}

						for (var k = 0; k < this.moreId.length; k++) {
							let num = this.moreId[k]
							this.moreLis.push(data.morePage[num])
						}
					}
				})
			},
			refreshLis() {
				uni.request({
					url: `http://cloud.agopage.com/6b83fd3bc06260ec/agopageDetail?agopageId=${this.id}`,
					success: ({
						data
					}) => {
						this.moreLis = []
						this.moreId = []

						for (var i = 0; i < 3; i++) {
							this.randouNum = Math.floor(Math.random() * data.morePage.length)

							this.isHas = false;
							for (var j = 0; j < this.moreId.length; j++) {
								if (this.moreId[j] == this.randouNum) {
									i--;
									this.isHas = true;
									break;
								}
							}
							if (this.isHas == false) {
								this.moreId.push(this.randouNum)
							}
						}


						for (var k = 0; k < this.moreId.length; k++) {
							let num = this.moreId[k]
							this.moreLis.push(data.morePage[num])
						}

					}
				})
			},
			toArticle(id) {
				uni.navigateTo({
					url: `/pages/article/article?id=${id}`
				})
			},
			setLike() {
				uni.setStorage({
					key: this.id,
					data: this.firstLis
				});

			},
			removeLike() {
				uni.removeStorage({
					key: this.id
				});

			},
			changeLike() {
				uni.getStorageInfo({
					success: (res) => {
						// console.log(res.keys)
						for (let i = 0; i < res.keys.length; i++) {
							if (this.id == res.keys[i]) {
								this.removeLike()
								uni.showToast({
									title: '取消收藏',
									icon: 'error',
									duration: 1000
								});
								break
							} else {
								uni.showToast({
									title: '收藏成功',
									duration: 1000
								});
								this.setLike()
							}
						}

					}
				})
			},

			addComment() {
				if(this.comstr == "") {
					uni.showToast({
						title: '不可发送空消息',
						icon: 'error',
						duration: 1000
					});
				}else {
					var timeStr = getDateTime.dateTimeStr('y-m-d h:i:s'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
					this.nowTime = timeStr
					this.commentLis.push({
						comment: {
							content: this.comstr,
							createdAt: this.nowTime,
							userInfo: {
								name: "阿妮亚",
								user_icon: "../../static/head.jpg"
							}
						},
						subComments: []
					})
					
					this.comstr = ""
				}
				
			}

		},

	}
</script>

<style lang="scss" scoped>
	.article {
		min-height: 100vh;
		background-color: #eee;
		position: relative;

		.box {
			width: 90vw;
			margin-left: 5vw;
			border-bottom: 1px solid #ccc;
			padding-bottom: 15px;

			image {
				width: 90vw;
				height: 200px;
				border-radius: 15px;
				margin-top: 10px;
			}

			h2 {
				font-size: 18px;
				font-weight: 700;
				margin-top: 10px;
			}

			p {
				width: 90vw;
				font-size: 14px;
				margin-top: 20px;
				text-indent: 20px;
			}
		}

		.more-page {
			width: 90vw;
			margin-left: 5vw;
			border-bottom: 1px solid #ccc;
			padding-bottom: 25px;

			.refresh {
				height: 25px;
				width: 50px;
				border: 1px solid #000;
				border-radius: 999px;
				font-size: 13px;
				text-align: center;
				line-height: 24px;
				margin-top: 15px;
			}

			h2 {
				font-size: 17px;
				font-weight: bold;
				margin-top: 20px;
			}

			.page-title {
				display: flex;
				margin-top: 15px;
				border-radius: 15px;
				box-shadow: 0px 10px 5px #ccc;


				p {
					font-size: 16px;
					font-weight: 700;
					width: 60vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				text {
					font-size: 13px;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 60vw;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					word-break: break-all;
				}

				image {
					width: 25vw;
					height: 80px;
					border-radius: 10px;
					margin-left: 1vw;
				}
			}


		}
		
		.wup {
			margin-left: 40vw;
			color: #ccc;
		}
		
		.comment {
			border-bottom: 1px solid #ccc;
			margin-top: 15px;
			width: 90vw;
			margin-left: 5vw;
			display: flex;

			.comment-text {
				margin-left: 10px;

				p {
					margin-bottom: 10px;
				}

				.target {
					display: flex;
					border-bottom: 1px solid #ccc;
					padding-bottom: 5px;
					margin-top: 5px;

					image {
						width: 30px;
						height: 30px;
					}

					p {
						margin-bottom: 5px;
					}
				}
			}

			image {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
		}

		.foot {
			margin-top: 20px;
			height: 50px;
			line-height: 50px;
			background-color: #ccc;
			font-size: 12px;
			text-align: center;
		}

		.setLike {
			position: sticky;
			display: flex;
			justify-content: space-between;
			bottom: 0;
			width: 100vw;
			height: 50px;
			background-color: #eeeeee;
			border-top: 1px solid #ccc;
			padding-top: 5px;

			.set-comment {

				display: flex;
				margin-top: 10px;
				margin-right: 10px;

				input {
					border: 1px solid #ccc;
					height: 30px;
					border-radius: 8px;
					margin-right: 15px;
				}

				button {
					height: 30px;
					background-color: #ccc;
					font-size: 15px;
					line-height: 30px;
				}
			}
		}
	}
</style>
